<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录</title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/htmleaf-demo.css">
    <link rel="stylesheet" type="text/css" href="./css/form.css">

    <script type="text/javascript">
        function refreshCode() {
            // 1,获取验证码的图片对象
            var vcode = document.getElementById("vcode");
            // 2,设置其src属性,加时间戳
            vcode.src = "/stuInfoSystem/getCode?time=" + new Date().getTime();
        }
    </script>
    <style>
        body {
            background-image: url('images/admin_LoginUi.jpg');
        }

        .custom-control-input-zzp {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }
    </style>
</head>
<body>

<div align="center" style="margin-top: 10px">
    <img src="images/icon.png" width="80px" height="80">
    <div style="margin-bottom: 15px"><h3>-学生综合素质管理系统-</h3></div>
    <form id="loginForm" class="form-horizontal">
        <span class="heading">管理员登录</span>
        <div class="form-group">
            <input class="form-control" name="adminId" id="adminID" placeholder="工号/学号">
            <i class="fa fa-user"></i>
        </div>
        <div class="form-group help">
            <input type="password" name="adminPwd" class="form-control" id="adminPwd" placeholder="密　码">
            <i class="fa fa-lock"></i>
        </div>
        <div class="form-inline">
            <label for="checkCode" style="color:black;">验证码：</label>
            <input type="text" name="checkCode" class="form-control" id="checkCode"
                   style="width: 120px;"/>
            <a href="javascript:refreshCode()"><img src="/ShoppingMall/checkCodeServlet" th:src="@{/getCode}"
                                                    title="看不清点击刷新" id="vcode" style="margin-bottom: 10px"/></a>
        </div>
        <div class="form-group">
            <div class="main-checkbox">
                <input type="checkbox"  class="ckBox" value="1" id="checkbox1" name="roleCk"/>
                <label for="checkbox1"></label>
            </div>
            <span class="text">超级管理员</span>
            <div class="main-checkbox">
                <input type="checkbox" class="ckBox" value="2" id="checkbox2" name="roleCk"/>
                <label for="checkbox2"></label>
            </div>
            <span class="text">辅导员</span>
            <div class="main-checkbox">
                <input type="checkbox" class="ckBox" checked value="3" id="checkbox3" name="roleCk"/>
                <label for="checkbox3"></label>
            </div>
            <span class="text">测评小组</span>
            <button id="login_btn" class="btn btn-default" style="margin-top: 15px;margin-right: 38px">登录</button>
        </div>
    </form>
</div>


<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/layer/layer.js"></script>

<script>

    $("#login_btn").click(function (e) {
        e.preventDefault(); //阻止默认行为（表单提交）

        // 学号校验
        var id = $("#adminID").val();
        if (id === '') {
            layer.msg('学号不为空', {icon: 5, time: 700});
            return;
        }

        // 密码校验
        var pwd = $("#adminPwd").val();
        if (pwd === '') {
            layer.msg('密码不为空', {icon: 5, time: 700});
            return;
        }

        // 验证码校验
        var code = $("#checkCode").val();
        if (code === '') {
            layer.msg('验证码不为空', {icon: 5, time: 700});
            return;
        }



        // 提交表单
        var formData = $("#loginForm").serialize()
        $.post('/stuInfoSystem/doAdminLogin', formData, function (data) {

            if (data.status === 1) {
                // 登入成功
                location.href = "/stuInfoSystem/toSurveyIndex"
            } else if (data.status === 2) {
                // 验证码错误
                $("#checkCode").val("");
                refreshCode();
                layer.msg(data.msg, {icon: 5, time: 700});
            }else if (data.status === 0) {
                // 非法用户
                $("#checkCode").val("");
                refreshCode();
                layer.msg(data.msg, {icon: 5, time: 700});
            } else {
                $("#checkCode").val("");
                refreshCode();
                layer.msg('学号或密码错误', {icon: 5, time: 700});
            }
        })
    });

    // 选择登入角色
    $(".ckBox").click(function(){
        $(".ckBox").prop("checked",false);
        $(this).prop("checked",true);
    });
</script>
</body>
</html>